<template>
  <h1>订单列表</h1>
  <el-button type="primary" @click="dialogVisible = true">添加订单</el-button>
  <el-dialog
      v-model="dialogVisible"
      title="添加订单"
      width="500"
  >
    <span>顾客姓名：<el-input v-model="form2.userName"></el-input></span>
    <span>员工电话：<el-input v-model="form2.employeeName"></el-input></span>
    <span>订单价格：<el-input v-model="form2.price"></el-input></span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="appendOrders">
          添加员工
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
      v-model="dialogVisible2"
      title="修改信息"
      width="500"
  >
    <span>顾客姓名：<el-input v-model="form.userName"></el-input></span>
    <span>员工姓名：<el-input v-model="form.employeeName"></el-input></span>
    <span>订单价格：<el-input v-model="form.price"></el-input></span>
    <span>
      支付方式：
      <el-select
          v-model="form.payWay"
          placeholder="Select"
          size="large"
          style="width: 240px"
      >
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="updateEmployee">
          修改员工
        </el-button>
      </div>
    </template>
  </el-dialog>
  <div>
    <el-table v-loading="loading" :data="OrdersList" border stripe  style="width: 90%">
      <el-table-column prop="ordersId" label="ID" width="100" />
      <el-table-column prop="userName" label="顾客姓名" width="100" />
      <el-table-column prop="employeeName" label="员工姓名" width="100"/>
      <el-table-column prop="price" label="订单价格" width="100"/>
      <el-table-column prop="ordersTime" label="订单时间" width="180"/>
      <el-table-column prop="isVip" label="是否为会员订单" width="100"/>
      <el-table-column prop="updatedTime" label="最后更新时间" width="180"/>
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="dialogVisible3 = true">
            删除
          </el-button>
          <el-button link type="primary" size="small" @click="handleUpdateOrdersInfo(scope.row)">修改</el-button>
          <el-dialog
              v-model="dialogVisible3"
              title="修改信息"
              width="500"
          >
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取消</el-button>
                <el-button type="primary" @click="deleteOrders(scope.row)">
                  确认删除
                </el-button>
              </div>
            </template>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import {DeleteOrders, GetOrdersList} from "../../api/BSideApi";
import {ElMessage} from "element-plus";

export default ({
  name: "AccountView",
  setup(){
    const form = ref({
      userName: '',
      employeeName: '',
      price: '',
      payWay: '',
      isVip: '',
    })

    const form2 = ref({
      userName: '',
      employeeName: '',
      price: '',
      payWay: '',
      isVip: '',
    })

    const OrdersList = ref([])
    const dialogVisible = ref(false)
    const dialogVisible2 = ref(false)
    const dialogVisible3 = ref(false)
    const loading = ref(true)

    onMounted(()=>{
      getOrdersList()
    })
    async function getOrdersList() {
      OrdersList.value = await GetOrdersList(1,'');
      loading.value = false
      if (!OrdersList.value){
        ElMessage({
          message: '未查询到数据',
          type: 'warning',
        })
      }

    }

    async function deleteOrders(row) {
      const v = await DeleteOrders(row.ordersId)
      if (!v) {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
      }else {
        ElMessage({
          message: '删除失败',
          type: 'error',
        })
      }
      getOrdersList()
      dialogVisible3.value = false
    }

    function appendOrders(){

    }
    return {
      form,
      form2,
      OrdersList,
      dialogVisible,
      dialogVisible2,
      dialogVisible3,
      appendOrders,
      loading,
      deleteOrders,
    }
  }
})
</script>

<style scoped>

</style>
